<!--
	*组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
	* 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
-->
<!-- 
	props: n.支柱 v.支撑，维护
	component: n.成分，组件，元件 adj.组成的，构成的
	template: n.模板样板
 
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue组件化应用</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="vueContainer">
			<div v-show="false">
				<!-- <div id="testOne">{{msg2}}</div> -->
				
				<p>
					<!-- <div>{{msg}}</div> -->
					<my-template v-bind:myprop="item" v-for="(item,index) in msg3" v-bind:key="item.id"></my-template>
				</p>
				
				<p>
					<!-- <div>{{msg4}}</div> -->
					<ol>
						<self-list v-bind:myprop2="item" v-for="(item,index) in msg3" v-bind:key="item.id + 'b'"></self-list>
					</ol>
					<!-- 重点：当vue负责的区域中有多个 -->
				</p>
			</div>
			
			<div id="testTwo">
				<msg-list></msg-list>
				<msg2-list></msg2-list>
			</div>
			
			
		</div>
		
		
	</body>
	<script type="text/javascript">
		"use strict"
		// console.log(Vue);
		
		/* 全局组件：例1 */
		Vue.component("self-list",{
			props: ['myprop2'],
			template:'<li>{{myprop2.text}}</li>',
		});
		
		/* 全局组件：例2 */
		// var arr = null;
		Vue.component("msg-list",{
			data:function(){//这里的data必须是一个函数,一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
				return {
					arr: [{"name":"王1"},{"name":"王2"},{"name":"王3"},{"name":"王0"}],
				}
			},
			/* data: {//这种写法在组件中是错误的
				arr: [{"name":"王1"},{"name":"王2"},{"name":"王3"},{"name":"王4"}],
			}, */
			template:'<ul><li v-for="list in arr">{{list.name}}</li></ul>',
		});
		
		
		// console.log(Vue.component);
		//--重点:通过Vue.component()方式添加的模板，必须要在创建new Vue()对象之前进行使用。
		//--在学习过js的对象创建后就可以知道,这里是在Vue的原型类上调用component方法来做的模板加入,在这只后所有实例化的对象,都会拥有这个模板.
			//而在创建之后添加的话,则会在下一次vue实例化后才可以使用.
		var vm = new Vue({
			el: "#vueContainer",
			/* data: {
				msg: "vue组件化应用",
				msg1: "模板内容",
				msg2: "id='vueContainer'对象下的显示信息",
				msg3: [{"id":"1","text":"11"},{"id":"2","text":"22"},{"id":"3","text":"33"},{"id":"4","text":"44"}],
				msg4: "分离式原型类component方法调用添加",
			},
			//template: '<div><div>{{msg1}}</div><my-template></my-template></div>',
			//--template中作为父级模板对象会将vue--现id指定对象下的原有的元素进行覆盖掉。
			components: {
				'my-template': {
					props: ['myprop'],
					template: '<div>{{myprop.text}}</div>',
				},
				'msg2-list': {
					data: function(){
						return {
							arr2: [{"name":"李1"},{"name":"李2"},{"name":"李3"},{"name":"李4"}],
						};
					},
					template: '<ul><li v-for="list in arr2">{{list.name}}</li></ul>',
				}
			},
			beforeCreate: function(){
				// console.log(Vue.component("self-list").options)
				// Vue.component().data.arr = [{"name":"王1"},{"name":"王2"},{"name":"王3"},{"name":"王4"}];
				// arr = [{"name":"王1"},{"name":"王2"},{"name":"王3"},{"name":"王0"}];
			},
			created: function(){
				
			},
			beforeMount: function(){
				
			},
			mounted: function(){
				
			},
			beforeDestory */
		});
		
		/*vue组件化相关讲解
		 * template--模板--n.
		 * components--组成的，构成的--adj.--成分--n.
		 * 		--props--n.&vt.支撑，支持。
		 * 
		 * Vue对象下的主属性--template中作为父级模板对象会将vue--现id指定对象下的原有的元素进行覆盖掉
		 * 		--且父级template属性下编写的含有vue性质的功能，如：'<div>{{msg1}}</div>'此类功能能够实现
		 * 
		 * Vue对象下的主属性--components--作为子模版容器的集合，其元素为自定义的标签，以及此标签对应的自定义编写好的“模板”--即template
		 * 		--子级的自定义的template中不能编写含有vue性质的功能：如'<div>{{msg1}}</div>'此类功能是无法实现的。
		 * 		注意：--作为自定义的标签名，其命名不能使用'_'下滑线。
		 * 
		 * template的单独添加方式：Vue.component("self-li"，{
		 * 							template: '<ol><li>列表1</li><li>列表2</li><li>列表3</li></ul>'
		 * 						});
		 * 		注意：--重点:通过Vue.component()方式添加的模板，必须要在创建new Vue()对象之前进行添加。
		 * 
		 * components/component下属性--props--自定义属性添加的集合。
		 * 		--真集合，其键值需要用数组表示带[]括号。
		 * 		注意：--由于通过components：下属性tamplate子模版下，无法直接编写类似于<div>{{msg1}}</div>这样的模板，需要通过在自定义标签上自定义的属性来进行中间连接。
		 * 
		 * MVVM模型--Model-View-ViewModel--MVC(Model View Controller)的改进版。
		 * 		--ViewModel:负责准备和管理和UI组件(Fragment/Activity)相关的数据类，即用来管理UI相关的数据，同时ViewModel还可以用来负责UI组件通信。
		 * 
		 * 
		 * */
	</script>
</html>
